<!--
 * @Descripttion: 
 * @version: 
 * @Author: Connor
 * @Date: 2021-04-12 14:07:23
 * @LastEditors: Connor
 * @LastEditTime: 2021-04-12 17:00:34
-->
<template>
  <div class="icon-box padding-lr flex align-center " @click="openlist()">
    <template v-if="messageLength">
      <el-popover placement="top-start" trigger="hover">
        <template v-if="message.length > 2">
          <div v-for="(item, index) in message.slice(0, 2)" :key="index" v-html="item.message"></div>
          <div>...</div>
        </template>
        <template v-else>
          <div v-for="(item, index) in message" :key="index" v-html="item.message"> </div>
        </template>
        <el-badge slot="reference" :value="count" :max="99" class="item">
          <i class="el-icon-message-solid text-red text-xl pointer"></i>
        </el-badge>
      </el-popover>
    </template>
    <template v-else>
      <i class="el-icon-message-solid text-red text-xl pointer"></i>
    </template>
  </div>
</template>

<script>
import { initCountFromCustomer } from '@/api/systemInformation'
export default {
  data() {
    return {
      messageLength: 1,
      count:0,
      message: []
    }
  },
  mounted() {
    this.initMessageConut();//第一次
    this.timer = setInterval(this.initMessageConut, 300000); //5分钟获取一次
  },
  beforeDestroy() {
      clearInterval(this.timer);
  },
  methods: {
    async initMessageConut() {
      const dataCont = await initCountFromCustomer({});
       //console.log("dataCont",dataCont);
       this.count = dataCont.count;
       this.message = dataCont.data;
    },
    openlist() {
        this.$router.push({
          name: 'SystemInformation',
          params: { messageStatus: 0}
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.icon-box {
  line-height: 1;
}
</style>
